<template>
  <el-drawer
    v-model="viewValue"
    :title="!showCustomHeader ? title : undefined"
    :size="drawerSize"
    :direction="direction"
    :modal="modal"
    :show-close="!showCustomHeader"
    :before-close="handleBeforeClose"
    :destroy-on-close="destroyOnClose"
    :class="className"
    v-bind="$attrs"
  >
    <template #header v-if="showCustomHeader">
      <div class="zz-Drawer-header">
        <span class="zz-Drawer-title">{{ title }}</span>
        <div class="zz-Drawer-actions">
          <el-icon
            @click="handleClose"
            class="zz-Drawer-action-btn zz-Drawer-close-btn"
            title="关闭"
          >
            <Close />
          </el-icon>
        </div>
      </div>
    </template>
    <div class="zz-Drawer-body">
      <slot></slot>
    </div>
    <template #footer v-if="showFooter">
      <div class="zz-Drawer-footer">
        <div class="zz-Drawer-footer-left">
          <slot name="footer-left"></slot>
        </div>
        <div class="zz-Drawer-footer-right">
          <el-button
            :size="buttonSize"
            @click="handleCancel"
            :loading="cancelLoading"
            :disabled="cancelDisabled"
            v-if="showCancelButton"
          >
            {{ cancelButtonText }}
          </el-button>
          <el-button
            type="primary"
            :size="buttonSize"
            :loading="confirmLoading"
            :disabled="confirmDisabled"
            @click="handleConfirm"
            v-if="showConfirmButton"
          >
            {{ confirmButtonText }}
          </el-button>
          <slot name="footer-right"></slot>
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, computed } from "vue";
import { Close } from "@element-plus/icons-vue";

const props = defineProps({
  // 基础属性
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  size: {
    type: String,
    default: "medium",
    validator: (value) =>
      ["small", "medium", "large", "extra-large", "full"].includes(value),
  },
  className: {
    type: String,
    default: "zz-Drawer",
  },

  // 抽屉方向
  direction: {
    type: String,
    default: "rtl", // 默认从右滑出
    validator: (value) => ["ltr", "rtl", "ttb", "btt"].includes(value),
  },

  // 抽屉行为配置
  modal: {
    type: Boolean,
    default: true,
  },
  closeOnClickModal: {
    type: Boolean,
    default: true,
  },
  closeOnPressEscape: {
    type: Boolean,
    default: true,
  },
  destroyOnClose: {
    type: Boolean,
    default: false,
  },

  // 头部配置
  showCustomHeader: {
    type: Boolean,
    default: true,
  },

  // 底部配置
  showFooter: {
    type: Boolean,
    default: true,
  },
  showCancelButton: {
    type: Boolean,
    default: true,
  },
  showConfirmButton: {
    type: Boolean,
    default: true,
  },
  cancelButtonText: {
    type: String,
    default: "取消",
  },
  confirmButtonText: {
    type: String,
    default: "确认",
  },
  buttonSize: {
    type: String,
    default: "default",
    validator: (value) => ["large", "default", "small"].includes(value),
  },

  // 加载状态
  cancelLoading: {
    type: Boolean,
    default: false,
  },
  confirmLoading: {
    type: Boolean,
    default: false,
  },
  cancelDisabled: {
    type: Boolean,
    default: false,
  },
  confirmDisabled: {
    type: Boolean,
    default: false,
  },

  // 兼容旧版本的属性
  loading: {
    type: Boolean,
    default: false,
  },
  saveName: {
    type: String,
    default: "",
  },
  closeName: {
    type: String,
    default: "",
  },
  defaultButton: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits([
  "update:modelValue",
  "confirm",
  "cancel",
  "close",
  "open",
  "opened",
  "closed",
  "open-change",
  // 兼容旧版本
  "ok",
]);

const viewValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
    emit("open-change", value);
    if (value) {
      emit("open");
    } else {
      emit("close");
    }
  },
});

// 设置抽屉尺寸
const drawerSize = computed(() => {
  switch (props.size) {
    case "extra-large":
      return "800px";
    case "large":
      return "600px";
    case "medium":
      return "400px";
    case "small":
      return "300px";
    case "full":
      return "100%";
    default:
      return "400px";
  }
});

// 兼容旧版本的按钮文本
const cancelButtonText = computed(() => {
  return props.closeName || props.cancelButtonText;
});

const confirmButtonText = computed(() => {
  return props.saveName || props.confirmButtonText;
});

// 兼容旧版本的加载状态
const cancelLoading = computed(() => {
  return props.loading || props.cancelLoading;
});

const confirmLoading = computed(() => {
  return props.loading || props.confirmLoading;
});

// 兼容旧版本的按钮显示
const showCancelButton = computed(() => {
  return props.defaultButton && props.showCancelButton;
});

const showConfirmButton = computed(() => {
  return props.defaultButton && props.showConfirmButton;
});

// 关闭前的钩子
const handleBeforeClose = (done) => {
  done();
};

// 关闭抽屉
const handleClose = () => {
  viewValue.value = false;
};

// 取消操作
const handleCancel = () => {
  emit("cancel");
  // 如果没有阻止默认行为，则关闭抽屉
  handleClose();
};

// 确认操作
const handleConfirm = () => {
  emit("confirm");
  // 兼容旧版本
  emit("ok");
};

// 兼容旧版本的方法
const cancel = () => {
  handleCancel();
};

const ok = () => {
  handleConfirm();
};

// 暴露方法给父组件
defineExpose({
  close: handleClose,
  // 兼容旧版本
  cancel,
  ok,
});
</script>

<style lang="less">
// 抽屉头部样式
.zz-Drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;

  .zz-Drawer-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--el-text-color-primary);
    line-height: 24px;
  }

  .zz-Drawer-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    .zz-Drawer-action-btn {
      width: 20px;
      height: 20px;
      cursor: pointer;
      color: var(--el-text-color-regular);
      transition: color 0.3s;

      &:hover {
        color: var(--el-color-primary);
      }

      &.zz-Drawer-close-btn:hover {
        color: var(--el-color-danger);
      }
    }
  }
}

// 抽屉内容区域
.zz-Drawer-body {
  padding: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--el-fill-color-lighter);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--el-border-color-darker);
    border-radius: 3px;

    &:hover {
      background: var(--el-text-color-disabled);
    }
  }
}

// 抽屉底部样式
.zz-Drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;

  .zz-Drawer-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .zz-Drawer-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.zz-Drawer .el-drawer__header {
  margin-bottom: 0px !important;
}

.zz-Drawer .el-drawer__body {
  padding: 0px !important;
}

.zz-Drawer .el-drawer__footer {
  padding: 10px;
}

// 全局抽屉样式覆盖
:deep(.zz-Drawer) {
  .el-drawer__header {
    margin-bottom: 0px !important;
  }

  // .el-drawer__body {
  //   padding: 20px 20px;
  // }

  .el-drawer__footer {
    padding-top: 0px;
  }

  // // 响应式设计
  // @media (max-width: 768px) {
  //   .el-drawer__wrapper {
  //     width: 90% !important;
  //   }

  //   .el-drawer__header {
  //     padding: 15px 15px 8px;
  //   }

  //   .el-drawer__body {
  //     padding: 8px 15px;
  //   }

  //   .el-drawer__footer {
  //     padding: 8px 15px 15px;
  //   }
  // }
}
</style>
